<template>
  <div class="home">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <input type="checkbox" v-model="item.flag" @change="check" />
        {{ item.name }}
      </li>
    </ul>
    <p><input type="checkbox" v-model="checkAll" /> 全选</p>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      list: [
        { name: "猫粮", price: 50 },
        { name: "狗粮", price: 40 },
        { name: "猪粮", price: 60 },
      ],
      checkAll: false,
    };
  },
  created() {
    setTimeout(() => {
      this.list[2].flag = true;
      // console.log(this.list);
    }, 3000);
  },
  methods: {
    check() {
      // 每一个选项改变的时候触发的函数
      this.checkAll = this.list.every((item) => item.flag);
    },
  },
};
</script>
